<template>
  <section class="component commission-report">
    <data-form :model="searchModel" @onSearch="refreshData" @handleResetForm="handleResetForm">
      <template slot="inputs">
        <el-form-item label="订单号" prop="caseNumber">
          <el-input v-model="searchModel.caseNumber"></el-input>
        </el-form-item>
        <el-form-item label="批次号" prop="batchNumber">
          <el-input v-model="searchModel.batchNumber"></el-input>
        </el-form-item>
        <el-form-item label="委托方" prop="principalId">
          <el-select v-model="searchModel.principalId" placeholder="请选择" clearable>
            <el-option v-for="{index,name,id} in principalList.content" :key="index" :label="name" :value="id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="机构" prop="deptId">
          <select-department v-model="searchModel.deptId" @on-select-change="(id, code) => departemntChange(id, code)"></select-department>
        </el-form-item>
        <el-form-item label="催收员" prop="collectorId">
          <el-select placeholder="请选择" v-model="searchModel.collectorId" clearable>
            <el-option v-for="{id,realName} in userSet" :key="id" :label="realName" :value="id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="催收总金额" prop="overdueAmount">
          <number-range v-model="searchModel.overdueAmount"></number-range>
        </el-form-item>
        <el-form-item label="逾期阶段" prop="overduePeriod">
          <el-select clearable placeholder="请选择" v-model="searchModel.overduePeriod">
            <el-option :key="index" :label="name" :value="code.replace('N', '')" v-for="{index,name,code} in $dict.getDictData('OverduePeriodStatus')"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="收款方式" prop="paymentType">
          <el-select clearable placeholder="请选择" v-model="searchModel.paymentType">
            <el-option :key="index" :label="name" :value="code" v-for="{index,name,code} in $dict.getDictData('PaymentType')"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="回款日期" prop="entryTime">
          <el-date-picker type="daterange" :editable="false" v-model="searchModel.entryTime" placeholder="选择日期时间" clearable></el-date-picker>
        </el-form-item>
        <el-form-item label="回款金额" prop="repayAmount">
          <number-range v-model="searchModel.repayAmount"></number-range>
        </el-form-item>
        <el-form-item label="确认时间" prop="manualConfirmDate">
          <el-date-picker type="datetimerange" :editable="false" v-model="searchModel.manualConfirmDate" placeholder="选择日期时间" clearable></el-date-picker>
        </el-form-item>
      </template>
    </data-form>
    <data-box :data="dataSet" @onPageChange="refreshData" :page="pageService">
      <template slot="buttons">
        <el-button @click="exportCaseInfo" v-auth="2108">导出</el-button>
      </template>
      <template slot="columns">
        <el-table-column prop="caseInfo.caseNumber" label="订单编号" :min-width="$helper.getColumnWidth(6)">
          <template slot-scope="scope">
            <el-button type="text" @click="openExecutionPage(scope.row)">{{scope.row.caseNumber}}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="batchNumber" label="批次号" :min-width="$helper.getColumnWidth(6)">
        </el-table-column>
        <el-table-column prop="principalName" label="委托方" :min-width="$helper.getColumnWidth(4)">
        </el-table-column>
        <el-table-column label="机构" prop="deptName" :min-width="$helper.getColumnWidth(4)">
        </el-table-column>
        <el-table-column prop="collectorRealName" label="催收员" :min-width="$helper.getColumnWidth(4)">
        </el-table-column>
        <el-table-column prop="overdueAmount" label="催收总金额" :min-width="$helper.getColumnWidth(4)" :formatter="(row) =>  $filter.toThousands(row.overdueAmount)">
        </el-table-column>
        <el-table-column prop="overdueStage" label="逾期阶段" :min-width="$helper.getColumnWidth(4)">
        </el-table-column>
        <el-table-column prop="paymentType" label="收款方式" :min-width="$helper.getColumnWidth(4)" :formatter="(row) => $filter.dictConvert(row.paymentType,'PaymentType')">
        </el-table-column>
        <el-table-column prop="entryTime" label="回款日期" :min-width="$helper.getColumnWidth(4)" :formatter="(row) =>  $filter.dateFormat(row.entryTime)">
        </el-table-column>
        <el-table-column prop="repayAmount" label="回款金额" :min-width="$helper.getColumnWidth(4)" :formatter="(row) =>  $filter.toThousands(row.repayAmount)">
        </el-table-column>
        <el-table-column prop="manualConfirmDate" label="确认时间" :min-width="$helper.getColumnWidth(4)" :formatter="(row) =>  $filter.dateTimeFormat(row.manualConfirmDate)">
        </el-table-column>
        <el-table-column prop="commissionRate" label="佣金比例" :min-width="$helper.getColumnWidth(4)">
        </el-table-column>
        <el-table-column prop="commissionAmount" label="佣金金额" :min-width="$helper.getColumnWidth(4)" :formatter="(row) =>  $filter.toThousands(row.commissionAmount)">
        </el-table-column>
      </template>
      <p slot="footer">{{`结果统计：共${info.countTotal}笔数据，佣金金额共${$filter.toThousands(info.commissionAmountTotal)}元。`}}</p>
    </data-box>
  </section>
</template>
<script lang="ts">

import { Vue, Component } from 'vue-property-decorator'
import { Layout, Dependencies,Auth } from '~/core/decorator';
import NumberRange from "~/components/common/number-range.vue";
import { CaseRepaymentService } from "~/services/domain-service/case-repayment.service";
import { PageService } from '~/utils/page.service'
import { State } from "vuex-class";
import { UserService } from "~/services/management-service/user.service";
import SelectDepartment from "~/components/business-component/select-department.vue";
import { CASE_CHANNEL, MENU_CHANNEL } from "~/config/enum.config";

@Auth(2104)
@Layout('workspace')
@Component({
  components: {
    SelectDepartment,
    NumberRange
  }
})

export default class CommissionReport extends Vue {
  @Dependencies(CaseRepaymentService)
  private caseRepaymentService: CaseRepaymentService;
  @Dependencies(PageService)
  private pageService: PageService;
  @Dependencies(UserService) private userService: UserService;

  @State private principalList: any;

  private searchModel: any = {
    deptId: "",
    paymentType: '',
    principalId: '',
    collectorId: '',
    userId: "",
    deptCode: "",
    entryTime: [],
    manualConfirmDate: [],
    overdueAmount: { min: '', max: '' },
    repayAmount: { min: '', max: '' }
  }
  private info: any = {}
  private dataSet: any[] = [];
  private userSet: any[] = []

  private refreshData() {
    this.caseRepaymentService.getCommissionReport(this.paramsHandler(), this.pageService)
      .subscribe(data => {
        this.dataSet = data
      })
  }

  private getOverdueAmount() {
    this.caseRepaymentService.getCommissionReportAmount(this.paramsHandler())
      .subscribe(data => {
        this.info = data
      })
  }

  private paramsHandler() {
    const params = { ...this.searchModel }
    params.manualConfirmDateMin = this.searchModel.manualConfirmDate && this.searchModel.manualConfirmDate.length ? this.$filter.dateTimeFormat(this.searchModel.manualConfirmDate[0]) : ''
    params.manualConfirmDateMax = this.searchModel.manualConfirmDate && this.searchModel.manualConfirmDate.length ? this.$filter.dateTimeFormat(this.searchModel.manualConfirmDate[1]) : ''
    params.entryTimeMin = this.$filter.dateRanageFormat(this.searchModel.entryTime).start
    params.entryTimeMax = this.$filter.dateRanageFormat(this.searchModel.entryTime).end
    params.overdueAmountMin = this.searchModel.overdueAmount.min
    params.overdueAmountMax = this.searchModel.overdueAmount.max
    params.repayAmountMin = this.searchModel.repayAmount.min
    params.repayAmountMax = this.searchModel.repayAmount.max

    delete params.manualConfirmDate
    delete params.entryTime
    delete params.overdueAmount
    delete params.repayAmount
    return params
  }

  private departemntChange(id, code) {
    this.searchModel.deptCode = code
    this.searchModel.userId = ''
    if (!code) {
      this.userSet = []
    } else {
      this.getAllUserByDeptCode(code)
    }
  }

  private getAllUserByDeptCode(deptCode: string) {
    this.userService.getAllUsersList({ deptCode }).subscribe(
      data => this.userSet = data
    )
  }

  private created() {
    this.refreshData()
    this.getOverdueAmount()
  }

  private handleResetForm() {
    this.searchModel.deptCode = ''
    this.searchModel.overdueAmount = { min: '', max: '' }
    this.searchModel.overdueAmount = { min: '', max: "" }
  }

  private exportCaseInfo() {
    if (!this.dataSet.length) return this.$message.warning('暂无数据无需导出！')
    this.caseRepaymentService.commissionReportExport(this.paramsHandler())
      .subscribe(data => {
        this.$common.downloadFile(data.url)
      })
  }
  /**
   * 进入查看执行页
   */
  private openExecutionPage(row) {
    this.$router.openCaseDetail(row.id, {
      menuChannel: MENU_CHANNEL.Commission_report,
      hiddenCaseList: true,
      hiddenAction: true
    });
  }
}


</script>